<template>
	<view :style="{height:boxHeight}" class="allHead">
		<view :style="{height:heights + 'px',backgroundColor:statusColor}" class="status_bar"></view>
		<view class="headers" :style="{top:heights + 'px',background:statusColor}">
			<view class="backHeader">
				<view>
					<slot name="left">
						<view class="back"  @click="goBack" v-if="backThem && back">
							<image v-if="backThem === 'dark'" :src="require('../../static/image/back_dark.png')"></image>
							<image v-else :src="require('../../static/image/back_light.png')"></image>
							<text :style="{
								'color': backThem === 'dark' ? '#181818' : '#ffffff'
							}">{{ leftTitle }}</text>
						</view>
					</slot>
				</view>
				<view :style="{
					'color': backThem === 'dark' ? '#181818' : '#ffffff'
				}">
					{{ centerTitle }}
				</view>
				<view></view>
			</view>
		</view>
		<slot name="bg"></slot>
	</view>
</template>

<script>
	export default{
		props:{
			// dark | light
			backThem:{
				type:String,
				default: ''
			},
			statusColor:{
				type:String,
				default:"#fff"
			},
			centerTitle:{
				type:String,
				default:''
			},
			leftTitle: {
				type: String,
				default: ''
			},
			back: {
				type: Boolean,
				default: true
			}
		},
		data(){
			return {
				heights:"",
				boxHeight:""
			}
		},
		created(){
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			let height = uni.getSystemInfoSync().statusBarHeight;
			let navHeight = menuButtonInfo.height + (menuButtonInfo.top - height)
			this.heights = height;
			this.boxHeight = (height +49)+'px';
		},
		methods:{
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.status_bar{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1500 !important;
}
.allHead {
	position: relative;
}
.backHeader{
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 0 30upx;
	justify-content: space-between;
	>view{
		width: 33%;
	}
	>view:nth-of-type(1){
		display: flex;
		align-items: center;
		justify-content: flex-start;
		>view{
			min-width: 100upx;
			height: 60upx;
			display: flex;
			align-items: center;
			image{
				width: 18upx;
				height: 30upx;
			}
			text {
				white-space: nowrap;
				margin-left: 14upx;
				font-size: 30upx
			}
		}
	}
	>view:nth-of-type(2){
		text-align: center;
		font-size: 32upx;
		color: #000000;
		white-space: nowrap;
	}
}
.headers {
	display: flex;
	align-items: center;
	width: 100%;
	height: 89upx; 
	position: fixed;
	background: none;
	box-sizing: border-box;
	z-index:300;
}
</style>
